<template>
	<div class="header bgd_color">

		<!--头部-->
		<v-header>

		</v-header>
		<div class="top_img">
        	<img src="../static/images/index_bdg.jpg"/>
    	</div>
		<div class="main">
			<div class="balance">
				<div class="title_acc f_white">
					<div class="left pad030">
						<label class="f_size20">账户余额：</label>
						<label class="f_size30">{{myAccount.amount}}</label>
					</div>
					<div class="right tit_rg pad030 f_size15">
						<button @click="yemx_show=!yemx_show">余额明细查看</button>
						<!--<button @click="dialog = true">提现</button>-->
						<button @click="tixianshow">提现</button>
						
					</div>
				</div>
				<div class="pad030 balance_main">
					<div v-show="yemx_show" class="">
						<div v-for="item in AccountRecords" class="acc_row border_bot">
							<div class="f_gray7e f_weight bal_lf">
								<div class="bal_lf_top">
									<p class="left">{{item.typeName}}</p>
									<p class="left"></p>
								</div>
								<div class="bal_lf_bottom">
									{{item.create_time}}
								</div>
							</div>
							<div class="right f_red f_weight bal_rg">
								<label>{{item.change}}</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="reward margin-top15">
				<div class="title_acc f_white">
					<div class="left pad030">
						<label class="f_size20">本期奖励余额（结算中金额）：</label>
						<label class="f_size30">{{monthlyTotal}}</label>
					</div>
					<div class="right tit_rg pad030 f_size15">
						<button @click="jlmx_show=!jlmx_show">奖励明细查看</button>
					</div>
				</div>
				<div class="pad030 reward_main">
					<div class="reward_row border_bot f_gray7e f_weight">
						<div>
							<label>销售奖励</label>
							<label class="f_size25">{{myAccount.monthlyAmountSelf}}</label>
						</div>
						<div>
							<label>团队管理奖</label>
							<label class="f_size25">{{myAccount.monthlyAmountChild}}</label>
						</div>
						<div>
							<label>精英月度奖</label>
							<label class="f_size25">{{myAccount.bestMonthAmont}}</label>
						</div>
						<div>
							<label>董事分红奖</label>
							<label class="f_size25">{{myAccount.directorAmount}}</label>
						</div>
						<div>
							<label>店铺奖励劵</label>
							<label class="f_size25">{{myAccount.shopAmount}}</label>
						</div>
						<div>
							<label>创业销售奖励二</label>
							<label class="f_size25">{{myAccount.selfFromChild}}</label>
						</div>
					</div>
					<div v-show="jlmx_show" class="">
						<div v-for="item in rewardsRecords" class="acc_row border_bot">
							<div class="f_gray7e f_weight bal_lf">
								<div class="bal_lf_top">
									<p class="left">{{item.typeName}}</p>
									<p class="left"></p>
								</div>
								<div class="bal_lf_bottom">
									<p class="left">{{item.create_time}}</p>
								</div>
							</div>
							<div class="right f_red f_weight bal_rg">
								<label>{{item.change}}</label>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<el-dialog title="申请提现" :visible.sync="dialog">
			<div v-if="bankInfoList.length > 0" id="cash" class="cash_css f_weight">
				<div class="cash_title">
					<span>银行卡：</span>
					<span>{{bankInfo.bankCard}}</span>
					<div class="btn right">
						<router-link to="info#modifyBankWarp">
							<button>修改</button>
						</router-link>
					</div>
				</div>
				<div class="cash_content">
					<div class="cash_row">
						<div class="left cash_col1">提现金额</div>
						<div class="left cash_col2">
							<span>可提现金额</span>
							<span class="f_red">{{myAccount.amount}}</span>
						</div>
					</div>
					<div class="cash_wrap">
						<span>￥</span>
						<input @change="money < 0 ? money = 0:money=money" v-model="money" type="number" />
					</div>
					<div class="cash_note">
						注：提现实际到账金额自动扣除{{charge}}%的手续费。
					</div>
					<div class="btn_cash">
						<button @click="tixian">申请提现</button>
					</div>
				</div>
			</div>
		</el-dialog>
		<!--脚部-->
		<v-footer>

		</v-footer>
	</div>
</template>
<script>
	export default {
		created() {
			var self = this
			this.$api.get('/front/users', null, r => {
				console.log('我的账户r', r)
				this.myAccount = r.data.list[0]
				this.monthlyTotal = r.data.list[0].monthlyTotal
				console.log('this.myAccount', this.myAccount)
				if(this.myAccount === undefined) {
					this.myAccount = {
						remain: 0.00
					}
				}
			})
			this.$api.get('/front/AccountRecords', null, r => {
				console.log('余额明细', r)
				this.AccountRecords = r.data.list
			})
			this.$api.get('/front/RewardsRecords', null, r => {
				console.log('奖励记录r', r)
				this.rewardsRecords = r.data.list
			})
			this.$api.get('/front/charge', null, r => {
				console.log('提现费率r', r)
				self.charge = r.data
			})
			this.$api.get('/front/banks', null, r => {
				console.log('银行卡信息r', r)
				self.bankInfoList = r.data.list
				self.bankInfo = r.data.list[0]
			})
		},
		data() {
			return {
				myAccount: {},
				monthlyTotal: 0,
				AccountRecords: [],
				rewardsRecords: [],
				dialog: false,
				charge: 0,
				bankInfo: {},
				bankInfoList: [],
				money: 0,
				jlmx_show: false,
				yemx_show: false,
			}
		},
		methods: {
			tixian: function() {
				var self = this
				
				this.dialog = false
				this.$api.post('/front/Cashes', {
					money: this.money
				}, r => {
					
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
				})
			},
			tixianshow: function() {
				var self = this
				if(self.bankInfoList.length === 0){
					self.$message('未填写银行卡信息，请先填写银行卡信息再提现');
					return false
				}
				self.dialog = true
			}
		}
	}
</script>